<template>
  <div class="AddJudges">
<!--    添加评委-->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="AddJudges_title">
      <el-breadcrumb-item :to="{ path: '/backIndex/managementTeam' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>添加评委</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="table_box">
      <el-table
          v-loading="loading"
          :data="allGame"
          border
          style="margin: 40px auto">
        <el-table-column
            label="比赛名称"
            align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.gameName }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="比赛级别"
            align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.gamelevel }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="type"
            label="比赛方式"
            align="center"
            :filters="[{ text: '组队赛', value: '组队赛' }, { text: '个人赛', value: '个人赛' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.type === '组队赛' ? 'primary' : 'success'"
                disable-transitions>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="比赛时间"
            align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.beginTime + ' ~ ' + scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                type="success"
                size="medium"
                @click="handleJudges(scope.$index, scope.row)">添加评委</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-show="paginationShow.showTimes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="paginationShow.page"
          :page-sizes="[10, 20, 25, 30]"
          :page-size="paginationShow.askNumber"
          layout="sizes, prev, pager, next"
          :total="this.paginationShow.allPage">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "AddJudges",
  data() {
    return {
      loading: true,
      allGame: [],
      paginationShow: {
        showTimes: false,
        page: 1, //第几页
        allPage: 1, //总页数
        askNumber: 10,//请求条数
      },
      publisher: '',
    }
  },
  methods: {
    // 标签筛选
    filterTag(value, row) {
      return row.type === value;
    },


    //分页
    handleSizeChange(val) {
      this.paginationShow.askNumber = val;
      this.getGames();
    },
    handleCurrentChange(val) {
      this.paginationShow.page = val;
      this.getGames();
    },
    //分页

    handleJudges(index, row) {
      const level = window.sessionStorage.getItem('level');
      if(level === '4' || level === '2'){
        this.allGame[index] === row;
        window.sessionStorage.setItem("gameID",this.allGame[index].gameID);
        this.$router.push('/backIndex/judges');
      } else {
        return this.$message.warning('权限不足');
      }

    },

    //  获取比赛列表
    async getGames() {
      const level = window.sessionStorage.getItem('level');
      if(level === "4"){
        this.paginationShow.showTimes =  true;
        this.loading = true;
        this.allGame.splice(0,this.allGame.length);
        const data = {page:this.paginationShow.page,asknumber: this.paginationShow.askNumber};
        const res = await this.$api.games(data);
        let allGame = {}
        allGame = res.data.page.records;
        this.paginationShow.allPage = res.data.page.pages*10;
        allGame.forEach((temp) => {
          //获取参赛人数
          this.$api.count(temp.gameID)
              .then(res =>{
                temp.gameCount = res.data.gameCount;
              })
          //获取参赛人数

          //获取比赛发布人名字
          this.$api.getAdminNamebyId(temp.adminID)
              .then(res =>{
                temp.AdminName = res.data.AdminName;
                this.allGame.push(temp)
              }).catch(err => {
            console.log(err);
          })
          // 获取比赛发布人名字
        });
        setTimeout(()=> {
          this.loading = false;
        },1000);
      }

    },


    //  老师获取比赛
    async teacherGetOwnGame(){
      const level = window.sessionStorage.getItem('level');
      if(level === "2"){
        const res = await this.$api.getOwnGameList();
        const allGame = res.data.ownGame;
        // for (const temp of allGame) {
        //   const groupIDList = await this.$api.getGroupBygameID(temp.gameID);
        //   temp.groupIDList = groupIDList.groupID;
        // }
        // this.loading = false;
        this.allGame = allGame;
      }
      this.loading = false;
    },
  },
  mounted() {
    this.getGames();
    this.teacherGetOwnGame();
  }
}
</script>

<style lang="less" scoped>
.AddJudges{
  .AddJudges_title{
    margin-bottom: 20px;
  }
  .table_box{
    background-color: #ffff;
    padding: 40px;
    box-shadow: 0 2px 7px rgba(187, 172, 172, 0.49), 0 5px 11px rgba(247, 231, 231, 0.36);
  }
}

//.button_box{
//  //position: absolute;
//  //top: 396px;
//  //left: 913px;
//  .button{
//    margin-top: 40px;
//    display: flex;
//    justify-content: center;
//  }
//}
</style>
